<template>
	<view class="graybg">
		<view class="padh20">
			<view class="box">
				<view class="billItem">
					<view>订单编号： <text>{{bill.orderCode||bill.id}}</text></view>
					<view v-if="bill.verificationCode">验证码： <text>【{{bill.verificationCode}}】 </text></view>
					<view v-if="bill.siteName">预订项目： <text>{{bill.projectName}} {{bill.siteName}}</text></view>
					<view v-if="bill.orderDate">预订时间： <text>{{bill.orderDate}} {{bill.orderTimePeriod.replace(/,/,'-')}}</text></view>
					<view class="billCode" v-if="bill.qrCodeBase&&bill.payStatus==1">
						 <!-- -->
						<image class="codeChecked" src="@/static/done.png"  v-if="bill.status=='2'"/>
						<image :src="bill.qrCodeBase"></image>
					</view>

					<view v-if="bill.payStatus==0">
						下单时间：
						<text>{{bill.payTime}}</text>
					</view>
					<view v-if="bill.payStatus!=0">
						支付时间：
						<text>{{bill.payTime}}</text>
					</view>
					<view>
						订单状态：
						<text>{{bill.payStatusStr}}</text>
					</view>
					<view v-if="bill.remark">
						备注： <text>{{bill.remark}}</text>
					</view>
					<view v-if="bill.payStatus==0">
						原价： <text class="price">￥{{bill.unuseBalancePrice}}</text>
					</view>
					
					<view v-if="bill.payStatus==0">
						会员价： <text class="price">￥{{bill.useBalancePrice}}</text>
					</view>
					<view v-if="bill.payStatus>0">
						支付金额： <text class="price">￥{{bill.finalOrderAmount}}</text>
					</view>
					<view v-if="bill.payStatus==3">
						退款金额： <text class="price">￥{{bill.refundAmount}}</text>
					</view>
					<view class="billFoot" v-if="bill.sonList==null">
						<!-- 2 用了  1 没用-->
						<view class="status textherf" @click="payCancel(bill)"
							v-if="!(bill.payStatus==0&&bill.parentType==2)&&bill.status==1">取消订单</view>
						<!-- 0 未支付  1 已支付 2 部分退款 3 已退款-->
						<view class="status" v-else-if="bill.payStatus==1">支付完成</view>
						<view class="status warning" v-else>{{bill.payStatusStr}}</view>

						<view class="price">
							<text v-if="bill.payStatus==3||bill.payStatus==2">已退款￥{{bill.refundAmount}}</text>
							<text v-else-if="bill.payStatus==1">￥{{bill.finalOrderAmount}}</text>
							<button class="billbtn" v-if="bill.payStatusStr == '未支付'&&bill.parentType!=2"
								@click="goBooking(bill)">去支付</button>
						</view>
					</view>
				</view>

				<view class="collapseBox" v-if="bill.sonList&&bill.sonList.length>0">
					<uni-collapse @change="changeCollapse">
						<uni-collapse-item :show-animation="true" v-for="z in bill.sonList" :key="z.id">
							<template v-slot:title>
								<text class="bold">{{z.projectName}}</text> <text class="ddd">({{z.siteName}})</text> <text class="ccc">{{z.orderDate.substring(5,10)}}  {{z.orderTimePeriod.replace(/,/,'-')}}</text>
							</template>
							<view class="collapseBody">
								<view class="pp">
									子订单编号： <text>{{z.orderCode}}</text>
								</view>
								<view class="pp">
									子订单金额： <text>￥{{z.orderAmount}}</text>
								</view>
								<view class="pp">
									场地： <text>{{z.siteName}}</text>
								</view>
								<view class="pp">
									预订时间： <text>{{z.orderDate}} {{z.orderTimePeriod.replace(/,/,'-')}}</text>
								</view>

								<view class="pp" v-if="z.verificationCode">
									验证码： <text>【{{z.verificationCode}}】 </text>
								</view>
								<view class="billCode" v-if="z.qrCodeBase&&z.payStatus==1">
									<image :src="z.qrCodeBase"></image>
								</view>
								<view class="pp" v-if="z.payStatus>0">
									支付金额： <text>￥{{z.finalOrderAmount}}</text>
								</view>
								<view class="pp" v-if="z.payStatus==3&&z.refundAmount">
									退款金额： <text>￥{{z.refundAmount}}</text>
								</view>
								<view class="pp" v-if="z.payStatus==0">
									原价： <text class="price">￥{{z.unuseBalancePrice}}</text>
								</view>

								<view class="pp" v-if="z.payStatus==0">
									会员价： <text class="price">￥{{z.useBalancePrice}}</text>
								</view>

								<view class="billFoot">
									<!-- 2 用了  1 没用-->
									<view class="status textherf" @click="payCancel(z)"
										v-if="!(z.payStatus==0&&z.parentType==2)&&z.status==1">取消订单</view>
									<!-- 0 未支付  1 已支付 2 部分退款 3 已退款-->
									<view class="status" v-else-if="z.payStatus==1">支付完成</view>
									<view class="status warning" v-else>{{z.payStatusStr}}</view>
									
									<!-- <view class="price" v-if="z.payStatus!=3">￥{{z.finalOrderAmount}}</view> -->
									<!-- 退款金额 -->
									<!-- <view class="price" v-else>￥{{z.refundAmount}}</view> -->
								</view>
							</view>
						</uni-collapse-item>
					</uni-collapse>
				</view>

				<view v-if="bill.sonList&&bill.sonList.length>0" class="fixedBBB">
					<view class="billFoot">
						<!-- 2 用了  1 没用-->
						<view class="status textherf" @click="payCancel(bill)" v-if="bill.status==1">
							<text v-if="bill.payStatus==0">批量取消</text>
							<text v-else>批量退订</text>
						</view>
						<!-- 0 未支付  1 已支付 2 部分退款 3 已退款-->
						<view class="status" v-else-if="bill.payStatus==1">支付完成</view>
						<view class="status warning" v-else>{{bill.payStatusStr}}</view>

						<view class="price">
							<text v-if="bill.payStatus==0">原价￥{{bill.orderAmount}}</text>
							<text v-if="bill.payStatus>0">￥{{bill.finalOrderAmount}}</text>
							<text class="danger" v-if="bill.payStatus==2||bill.payStatus==3">
								(已退款￥{{bill.refundAmount}})</text>
						
							<button class="billbtn" v-if="bill.payStatusStr == '未支付'&&bill.parentType!=2"
								@click="goBooking(bill)">去支付</button>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import * as api from '@/common/api.js'
	import {
		ref,
		getCurrentInstance
	} from 'vue';
	import {
		onLoad,
		onBackPress,onPullDownRefresh
	} from '@dcloudio/uni-app'
	const {
		proxy
	} = getCurrentInstance()
	const bill = ref({})
	const billId = ref()
	const accordionVal = ref(1)

	onLoad((options) => {
		// 获取订单详情
		console.log(options.id)
		billId.value = options.id
		getBill()
	})
	onPullDownRefresh(()=>{
		getBill()
	})

	function payCancel(item) {
		if (item.payStatus == 1) {
			// 已付款
			api.getCancelHint(item.orderCode).then(res => {
				if (res.data.canCancel == 1&&res.data.refundPercent!=100) {
					let hour = Math.floor(res.data.timeMinutes / 60)
					let minute = res.data.timeMinutes % 60
					let msg

					if (hour > 0) {
						msg = `距离开场还有${hour}小时 ${minute}分钟，将扣款${100 - res.data.refundPercent}%，你确定要退订吗？`
					} else {
						msg = `距离开场还有${minute}分钟，将扣款${100 - res.data.refundPercent}%，你确定要退订吗？`
					}

					uni.showModal({
						title: '温馨提示',
						content: msg,
						success: function(res) {
							if (res.confirm) {
								cancelThisOrder(item.orderCode)
							} else if (res.cancel) {
								console.log('取消');
							}
						}
					});
				} else if(res.data.canCancel == 0) {
					uni.showModal({
						title: '温馨提示',
						content: `此订单不可退订，如需退订请联系商家`,
						showCancel: false,
						success: function(res) {
							if (res.confirm) {
								console.log('确定');
							} else if (res.cancel) {
								console.log('取消');
							}
						}
					});
				} else {
					uni.showModal({
						title: '提示',
						content: '确定取消订单吗？',
						success: function(res) {
							if (res.confirm) {
								cancelThisOrder(item.orderCode)
							} else if (res.cancel) {
								console.log('取消');
							}
						}
					});
				}
			})

		} else {
			uni.showModal({
				title: '提示',
				content: '确定取消订单吗？',
				success: function(res) {
					if (res.confirm) {
						cancelThisOrder(item.orderCode)
					} else if (res.cancel) {
						console.log('取消');
					}
				}
			});
		}

	}

	function cancelThisOrder(id) {
		api.cancelOrder(id).then((res) => {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			});
			getBill()
		})
	}

	function getBill() {
		api.getMaItemById(billId.value).then(res => {
			bill.value = res.data
		})
	}

	function goBooking(b) {
		let path = `/pages/index/booking?id=${b.id}`;
		uni.redirectTo({
			url: path
		});
	}

	function changeCollapse(e) {
		console.log(e);
	}
</script>

<style lang="scss" scoped>
	.collapseBox {
		margin-top: 30rpx;
	}

	.billItem {
		width: auto;
		padding-bottom: 1px;

		.uni-input {
			padding: 15rpx 0;
			color: #000;
		}
	}

	.rrcard .box {
		padding: 0 0 1px;
		margin: 20rpx 0 0;
	}

	.graybg {
		background: #f7f8fa;
		padding: 0 0 140rpx;
		height: 100vh;
		width: 100vw;
		overflow: auto;
	}

	.whitebg {
		background: #fff;
		margin-top: 15rpx;
		border-radius: 20rpx;
		margin-bottom: 180rpx;
	}

	.uni-list-cell::after {
		display: none;
	}

	.padh20 {
		padding: 0 25rpx;
	}

	.billItem .billCode {
		position: relative;
		border-top: 1rpx dashed #E5E5E5;
	}

	.collapseBody {
		margin: 20rpx 0 0;
	}

	.collapseBody .billCode {
		position: relative;
		border-top: 1rpx dashed #E5E5E5;
	}

	.billItem .billCode image {
		width: 340rpx;
		height: 340rpx;
		margin: 30rpx auto;
		display: block;
	}

	.collapseBody .billCode image {
		width: 340rpx;
		height: 340rpx;
		margin: 30rpx auto;
		display: block;
	}

	.billFoot .status.textherf {
		color: #888;
		font-size: 28rpx;
		text-decoration: underline;
	}

	.collapseBody .billFoot {
		margin: 20rpx 0 0;
		padding: 22rpx 0;
	}

	.billSon {
		padding: 0 35rpx;
		border-top: 1px dashed #e1e1e1;
		border-bottom: 1px dashed #e1e1e1;
	}

	.billItem .billSonItem {}

	.billSonItem .pp {
		padding: 15rpx 0;
		overflow: hidden;
	}

	.collapseBody .pp {
		padding: 15rpx 0;
		overflow: hidden;
	}

	.billSonItem .pp text {
		float: right;
	}

	.collapseBody .pp text {
		float: right;
	}

	.billItem .ttt {
		font-size: 28rpx;
		padding: 0 35rpx;
		color: #000;
	}

	.fixedBBB {
		background: #fff;
		width: 100%;
		position: fixed;
		height: 120rpx;
		bottom: 0;
		left: 0;
	}

	.codeChecked {
		position: absolute;
		width: 200rpx;
		height: 130rpx;
		right: 15%;
		top: 30%;
	}
	.billItem view text.price{ color: #ff8124;font-weight:bold;}
	.bold{font-weight:500;font-size:28rpx;}
	.ccc{color:#666;font-size:28rpx;}
	.ddd{color:#666;font-size:28rpx;margin: 0 10rpx;}
	.billFoot text.danger{color: #da2a2a;}
	.billItem view text{white-space: nowrap;}
</style>
